<!doctype html>
<html lang="zh-Hans-CN">

<head>
    <meta charset="utf-8"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, viewport-fit=cover">
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <title>编辑明细</title>
    <link rel="stylesheet" href="/ui/mobile/iconfont/iconfont.css">
    <link rel="stylesheet" href="/ui/mobile/css/ui.all.css"/>
    <link rel="stylesheet" href="/ui/mobile/css/style.css" type="text/css"/>
</head>

<body>
<div class="c-main">
    <header class="detail-header">
        <p data-name="questionTitle" class="tit"></p>
        <p data-name="price" class="price"></p>
    </header>

    <section class="detail-tabcont">
        <div class="bgc-fff plr10 mb10">
            <div class="detail-form-title">
                <i class="iconfont icon-yuyuexinxi"></i>
                <p>预约信息</p>
            </div>
            <ul data-wrap="form" class="doc-form"></ul>
        </div>
    </section>

    <div class="fixed-bs-box">
        <div class="fixed-bs order-fixed-bot">
            <a href="javascript:history.back()" class="f-btn btn-full">返回</a>
        </div>
    </div>
</div>
<script type="text/javascript" src="/m/public/all.ui.js"></script>
<script src="/ui/mobile/iconfont/iconfont.js"></script>
<script src="/m/public/util.js"></script>

<!--查看大图-->
<link rel="stylesheet" href="/ui/mobile/widget/photoswiper/css/photoswipe.css" type="text/css"/>
<script type="text/javascript" src="/ui/mobile/widget/photoswiper/js/photoswipe.js"></script>

<script type="text/javascript">
    const {orderId} = $.getPageParam();

    if (!orderId) {
        location.href = "/m/error.html?" + $.param({msg: "订单ID不能为空", back: window.location.href});

    }

    getQuesOrderDetails({orderId}, ({Code, Message, Result: data}) => {
        if (Code !== 10000) {
            location.href = "/m/error.html?" + $.param({msg: Message, back: window.location.href});
        }

        const {price, questionTitle, answer = [], orderState} = data;
        $('[data-name="questionTitle"]').text(questionTitle);
        $('[data-name="price"]').text("¥" + (price / 100).toFixed(2));


        answer.forEach(data => {
            $('[data-wrap="form"]').append(getRowDom(data));
        });
    });

    function getRowDom({rowTitle, rowValue, rowMustFlag, rowType = 1}) {
        const $dom = $(`
            <li>
                <div class="form-key">${rowMustFlag === 1 ? `<i style="color: red">*</i> ` : ''} ${rowTitle}</div>
                <div class="form-info">${rowValue || ""}</div>
            </li>
        `);


        // if ([3, 4, 6].findIndex(type=>type===rowType) !== -1) {
        //     $dom.addClass("islink");
        // }

        if (rowType === 2) {
            $dom.html(`
                <div class="form-info">
                    <div class="upload-tit c-555">${rowMustFlag === 1 ? `<i style="color: red">*</i> ` : ''} ${rowTitle}</div>
                    <p class="mt10">${rowValue || ""}</p>
                </div>
            `)
        }

        if (rowType === 5) {
            const $widget = $(`
                <div class="form-info">
                    <div class="upload-tit c-555">${rowMustFlag === 1 ? `<i style="color: red">*</i> ` : ''}${rowTitle}</div>
                    <ul data-widget="upload" class="file-list c-photohold mt10"></ul>
                </div>
            `);

            const $cont = $widget.find('[data-widget="upload"]');
            if (rowValue) {
                rowValue.split(",").forEach(url => {
                    const $card = $(`
                        <li>
                            <div class="file-img">
                                <img src="${url}" class="c-photoswipe" alt="">
                            </div>
                        </li>
                    `);

                    $cont.append($card);
                })
            }

            $dom.html($widget);
        }

        return $dom;

    }

    function getQuesOrderDetails(param, callback = Function()) {
        return $.sApi({
            data: param,
            url: "/api/QuestionOrder/getQuesOrderDetails"
        }, callback)
    }

</script>

</body>
</html>